<!--
 * @Author: wanglianxin
 * @Date: 2023-08-22 11:32:08
 * @LastEditors: wanglianxin
 * @LastEditTime: 2023-08-31 11:25:25
 * @FilePath: \standard-check\src\components\CollectImages\CollectImages.vue
 * @Description: 采集图像组件
-->
<template>
  <div
    class="full-width relative-position flex flex-column flex-1"
    :class="{ 'full-height': highBrowser }"
  >
    <div :style="{ height: '36px' }">
      <collect-header-top>
        <div class="header-title" slot="left" v-if="imageShow">
          <div v-if="showTitle">预留印鉴卡</div>
          <!--  验印场景选择      -->
          <div v-if="selectSealType">
            <span class="scan-type">验印类型</span>
            <a-checkbox-group
              :value="checkboxValue"
              @change="onChangeCheckBox"
              v-if="initSealTypeList.length"
            >
              <a-checkbox
                v-for="(item, index) in initSealTypeList"
                :disabled="item.disable"
                :value="item.typeno"
                :key="index"
                >{{ item.typename }}</a-checkbox
              >
            </a-checkbox-group>
            <a-select
              style="width: 160px"
              placeholder="请选择"
              allowClear
              @change="handleChange"
              v-model="subclass"
              v-show="
                initSealTypeList.length && subclassList.length > 1 && !initSealTypeList[0].disable
              "
            >
              <a-select-option
                v-for="(item, index) in subclassList"
                :value="item.typeno"
                :key="index"
                >{{ item.typename }}</a-select-option
              >
            </a-select>
          </div>
        </div>

        <div
          class="ws-off-line"
          slot="right"
          v-if="billData && clientConnectState !== 1 && !readOnly"
        >
          <!-- clientConnectState:{{clientConnectState}}--readOnly:{{readOnly}} -->
          采集服务异常，请
          <a-button type="link" @click="restartClient">重新连接</a-button> 或
          <a-button type="link" @click="installClient">安装程序</a-button>
        </div>
        <div slot="right" class="select-sets" v-if="readOnly && selectSets && imageShow">
          <a-select style="width: 96px" v-model="choiceHold">
            <a-select-option v-for="(item, index) in sealNum" :value="item.code" :key="index">{{
              item.name
            }}</a-select-option>
          </a-select>
        </div>
      </collect-header-top>
    </div>
    <a-empty class="empty-icon flex-space" v-show="!this.collectedImagesList.length && imageShow && typeDevice==='0'" />
    <div class="empty-icon item-center" slot="left" v-if="!imageShow">
      <div class="lock-image">
        <img src="@/assets/images/lock-image.png" alt="" />
      </div>
    </div>
    <div class="empty-icon item-center player-box" v-if="typeDevice==='1'&& isShowTakePhotoBtn" style="z-index:9">
      <div class="lock-image" style="height:100%">
        <img id="player" alt="" class="photo-img" style="height:100%">
      </div>
    </div>
    <a-spin :spinning="cameraLoading" style="height:100%;display:flex;align-items:center;justify-content:center;z-index:19"></a-spin>
    <div
      class="flex-space flex"
      :style="{ height: 'calc(100% - 36px)' }"
      v-show="this.collectedImagesList.length"
    >
      <a-layout>
        <a-layout-sider
          width="106"
          class="bg-transparent collected-image-list"
          v-if="collectedImagesList.length > 1"
        >
          <ul>
            <li
              v-for="(item, index) in collectedImagesList"
              :key="index"
              :class="{ on: index == currentImageIndex }"
              @click="switchCollectImg(index)"
            >
              <lazy-img :src="item.thumbUrl"></lazy-img>
              <a-icon
                type="delete"
                class="delete"
                @click.stop="deleteImage(index)"
                v-if="!readOnly"
              />
            </li>
          </ul>
        </a-layout-sider>
        <a-layout-content class="bg-transparent flex"
          ><div class="main-box" ref="mainBox" :class="{ 'read-only': readOnly }">
            <canvas class="flex-space" id="mainCanvas"></canvas>
            <div class="absolute-center" v-if="loading">
              <a-spin> </a-spin>
            </div>
          </div>
        </a-layout-content>
      </a-layout>
    </div>
    <div class="aside-tools" v-if="!readOnly">
      <collect-images-tools
        :list="collectImagesToolsList"
        :mediaScan="selectSealType ? false : true"
        :isGetDeviceList="isGetDeviceList"
        :isImportScan="isImportScan"
        :clientConnectState="clientConnectState"
        :isFirstCollect="isFirstCollect"
        :isSingle="isSingle"
        :scanOnly="scanOnly"
        :pendingCount="pendingCount"
        @change="hangleCollectTools"
        :key="toolKey"
      ></collect-images-tools>
      <!-- h5上传 start -->
      <a-upload
        v-if="clientConnectState !== 1"
        action="#"
        :multiple=true
        ref="uploadRef"
        class="upload-input"
        id="upload-input"
        :accept="uploadlimitFileType"
        :beforeUpload="beforeUpload"
      />
      <!-- h5上传 end -->
    </div>

    <!-- 设备选择弹窗 start -->
    <a-modal
      title="设备"
      :visible="setDeviceVisible"
      :maskClosable="false"
      @ok="confirmDevice"
      @cancel="setDeviceVisible = false"
    >
      <a-form :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" autocomplete="off">
        <a-form-item label="扫描设备">
          <a-select v-model="selectDevice" placeholder="请选择设备" style="width: 200px">
            <a-select-option
              v-for="(item, index) in allScanDevices"
              :key="index"
              :label="item.name"
              :value="item.name"
              >{{ item.name }}</a-select-option
            >
          </a-select>
        </a-form-item>
        <a-form-item label="USB-ID"> {{ deviceInfo.usbID }} </a-form-item>
        <a-form-item label="IP地址">{{ deviceInfo.ipAdress }} </a-form-item>
        <a-form-item label="MAC地址"> {{ deviceInfo.macAdress }} </a-form-item>
      </a-form>
    </a-modal>
    <!-- 设置弹窗 start -->
    <a-modal
      title="设置"
      :visible="setOptVisible"
      @ok="confirmSetting"
      @cancel="setOptVisible = false"
    >
      <a-form :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" autocomplete="off">
        <a-form-item label="扫描方式">
          <a-radio-group name="singleOrDoubleFace" v-model="opt.singleOrDoubleFace">
            <a-radio :value="0"> 单面 </a-radio>
            <a-radio :value="1"> 双面 </a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="DPI">
          <a-radio-group name="dpi" v-model="opt.dpi">
            <a-radio :value="300"> 300 </a-radio>
            <a-radio :value="200"> 200 </a-radio>
          </a-radio-group>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
<script>
import { mapState } from 'vuex';
import { getOs, guid, debounce, getUrlParam } from '@/utils';
import CollectImagesTools from './CollectImagesTools/CollectImagesTools.vue';
import CollectHeaderTop from './CollectHeaderTop/CollectHeaderTop.vue';
import LazyImg from '../lazyImg/lazyImg.vue';
import { getLatestClient, getBatchId, uploadByForm, reqDeleteImages,reqAddDevice, reqCalibration, } from '@/api';
import handleImgFn from './handleImgFn.vue';
export default {
  mixins: [handleImgFn],
  components: { CollectImagesTools, LazyImg, CollectHeaderTop },
  props: {
    showTitle: {
      //是否显示title  默认显示
      type: Boolean,
      default: true,
    },
    selectSealType: Boolean, //是否可选择印鉴类型
    list: Array, // 默认显示的图片列表
    scanOnly: {
      type: Boolean, //只有扫描无其他显示，
      default: null,
    },
    readOnly: {
      //页面只读
      type: Boolean,
      default: null,
    },
    manuallyExtractOpt: {
      //手工框章
      type: Object,
      default: () => {},
    },
    selectSets: { type: Boolean, default: false }, //是否选择套数
    detailStampShips: {
      //所有的印鉴套数
      type: Number,
    },
    collectImagesToolsOpt: {
      //采集工具参数
      type: Array,
      default: null,
    },
    pendingCount: {
      // 提取印鉴接口处于pending状态的数量
      type: Number,
      default: 0,
    },
    imageBatchId: {
      //流水号，传了该值，就往该值里采集影像（只有存量管理重扫时需要）
      type: String,
      default: '',
    },
    imageShow: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      isShowChildren: false, //是否显示业务章的小类
      collectImages: [], // 正在采集中的图像文件
      unCollected: [], //当采集端消息滞后的时候预留（解决顺德采集服务滞后）
      collectedImagesList: [], //展示收集完图像列表
      currentImageIndex: 0, //当前图像索引
      sessionId: guid(), //当前页sessionId
      clientConnectState: 0, //ws链接状态 1为成功
      connectTimer: 0, //链接ws定时器
      allScanDevices: [], //设备列表
      selectDevice: '', //设备选中
      deviceInfo: {}, //设备信息
      subclass: '', //业务印章子章值
      subclassList: [], //业务印章子章列表
      opt: {
        //设置 弹窗数据
        singleOrDoubleFace: 0, //单双面
        dpi: 300, //dpi
      },
      choiceHold: 1, //选择第几套
      singleOrDoubleFace: '0', //扫描单双面  0 单面 1双面
      dpi: '300',
      isImportScan: false, //正在采集  当点击扫描和导入时，提交按钮置灰
      collectState: 0, //手机图像状态  1正在导入，2，正在扫描，0健康状态可以采集
      fileCount: 0, //采集图像总数量
      resDataBase64: '', //重合图base64
      restartClientLock: false, //重新连接锁 true：正在连接 false：没在连接
      restartService: null, //重连服务
      collectImagesToolsList: [
        //默认建库功能列表
        //采集图像工具列表
        { name: '清空', value: 'delete', icon: 'delete', iconfont: false },
        // {
        //   name: '设置',
        //   value: 'setting',
        //   icon: 'setting',
        //   iconfont: false,
        // },
        {
          name: '设备',
          value: 'device',
          icon: 'laptop',
          iconfont: false,
          isBreak: true,
          isGetDevice: true,
        },
        {
          name: '扫描',
          value: 'scan',
          icon: 'scan',
          iconfont: false,
          isBreak: true,
          isGetDevice: true,
        },
        // {
        //   name: '拍摄',
        //   value: 'camera',
        //   icon: 'camera',
        //   iconfont: false,
        //   isBreak: true,
        //   isGetDevice: true,
        // },
        // { name: '识别中', value: '', icon: 'check-square', iconfont: false },
      ],
      isGetDeviceList: false, //正在获取设备列表 true/false
      backWebSocket: null, //后台服务
      setDeviceVisible: false, //设置设备 显隐
      setOptVisible: false, //设置功能弹窗 显隐
      isOpenByTBRowser: true, //是否用天创浏览器打开
      pageBuildType: '1', //0建库复核单面，1建库复核双面，其他建库复核完成
      isCommitted: false, //是否提交
      loading: false, //画canvas时加载图标
      checkboxValue: [], //验印类型选择值
      isFirstCollect: true, //是否第一次扫描   验印时要求只能扫描一张;
      isSingle: 1, // 是否单张扫描
      deviceType: 1, //0高拍仪 1平板 2滚筒 4导入  默认平板扫描
      toolKey: 0, //工具栏key
      highBrowser: true, //高版本谷歌浏览器
      uploadlimitFileType: '', // h5上传文件类型限制
      batchId: '', // 用于h5上传
      typeDevice:'0', //设备类型，0-扫描仪，1-高拍仪
      isShowTakePhotoBtn:true, //是否显示拍摄按钮 当typeDevice=0时，拍摄和预览按钮都不显示；当typeDevice=1并且isShowTakePhotoBtn=true,显示拍摄按钮；反之显示预览按钮
      cameraLoading:false //拍摄图片加载中
    };
  },
  computed: {
    ...mapState('business', ['baseUrl', 'chioceSeal', 'initSealTypeList', 'userId']),
    ...mapState('imaging', ['billData', 'browserParams', 'configParams', 'busiSerialNo', 'tecrun']),
    sealNum() {
      //套数列表
      let list = [];
      list = new Array(this.detailStampShips).fill({});
      list = list.map((i, index) => {
        return {
          code: index + 1,
          name: `第${index + 1}套`,
        };
      });
      return list;
    },
  },
  created() {
    let version = navigator.userAgent.match(/Chrome\/\d{2,3}/);
    if (version && version[0]) {
      version = Number(version[0].replace('Chrome/', ''));
      if (version < 50) {
        this.highBrowser = false;
      }
    }
  },
  mounted() {
    const { isImport } = getUrlParam(window.location.search);
    if (isImport === '1') {
      this.collectImagesToolsList.splice(3, 0, {
        name: '导入',
        value: 'import',
        icon: 'download',
        iconfont: false,
        isBreak: true,
      });
    }
    if (this.initSealTypeList) {
      this.initSealType();
    }
    setTimeout(() => {
      this.initPage();
    });
  },
  methods: {
    //初始化右侧按钮
    initCollectTools() {
      //验印
      console.log(this.$route.name)
        if(this.$route.name == 'billScan'&&this.isShowTakePhotoBtn===true){
          this.collectImagesToolsList = this.collectImagesToolsOpt?.length
          ? this.collectImagesToolsOpt
          : [
              //采集图像工具列表
              { name: '清空', value: 'delete', icon: 'delete', iconfont: false },
              {
                name: '设备',
                value: 'device',
                icon: 'setting',
                iconfont: false, //不是iconfont，时antd自带图标
                isBreak: true,
                isGetDevice: true,
              },
              {
                name: '扫描',
                value: 'scan',
                icon: 'scan',
                iconfont: false,
                isBreak: true,
                isGetDevice: true,
              },
              {
                name: '拍摄',
                value: 'camera',
                icon: 'camera',
                iconfont: false,
                isBreak: true,
                isGetDevice: true,
              },
              // { name: '拍摄', value: 'camera', icon: 'camera', iconfont: false },
              { name: '提交', value: 'submit', icon: 'check-square', iconfont: false },
            ];
        }else{
          this.collectImagesToolsList = this.collectImagesToolsOpt?.length
          ? this.collectImagesToolsOpt
          : [
              //采集图像工具列表
              { name: '清空', value: 'delete', icon: 'delete', iconfont: false },
              {
                name: '设备',
                value: 'device',
                icon: 'setting',
                iconfont: false, //不是iconfont，时antd自带图标
                isBreak: true,
                isGetDevice: true,
              },
              {
                name: '扫描',
                value: 'scan',
                icon: 'scan',
                iconfont: false,
                isBreak: true,
                isGetDevice: true,
              },
              // { name: '拍摄', value: 'camera', icon: 'camera', iconfont: false },
              { name: '提交', value: 'submit', icon: 'check-square', iconfont: false },
            ];
        }
        

        const { isImport } = getUrlParam(window.location.search);
        if (isImport === '1') {
          this.collectImagesToolsList.splice(3, 0, {
            name: '导入',
            value: 'import',
            icon: 'download',
            iconfont: false,
            isBreak: true,
          });
        }
    },
    /**
     * @description: 初始化页面数据
     * @return {*}
     */
    initPage() {
      if (this.scanOnly) {
        this.initCollectTools()
      } else {
        if (this.collectImagesToolsOpt) {
          this.collectImagesToolsList = this.collectImagesToolsOpt;
        }
      }
      if (this.readOnly && this.list.length) {
        this.collectedImagesList = this.list;
        this.$nextTick(() => {
          this.switchCollectImg(0);
        });
        return;
      }
      if (!this.list?.length) {
        this.collectedImagesList = [];
      }

      this.$store.dispatch('imaging/pageInit').then(async () => {
        if (this.browserParams) {
          await this.$store.dispatch('imaging/getBusiSerialNo');
        }
        if (this.configParams) {
          // 设置单双面
          if (this.configParams && this.configParams.device) {
            this.singleOrDoubleFace = this.configParams.device.singleOrDouble;
          }
          // 设置是否单张扫描
          if (this.configParams && this.configParams.isSingle) {
            this.isSingle = this.configParams.isSingle;
          }
          if (this.billData) {
            this.initClientWebSocket();
          }
        }
      });
    },
    /**
     * @description: 重新连接ws服务
     * @return {*}
     */
    restartClient() {
      if (this.restartClientLock) {
        return;
      }
      this.restartClientLock = true;
      this.initRestartClient();
      setTimeout(() => {
        if (this.restartService.readyState === 1 && this.clientConnectState !== 1) {
          console.log('发送start');
          this.ws.sendClientWsData('restartService', 'start');
        }
      }, 1000);
    },
    /**
     * @description: 安装程序
     * @return {*}
     */
    async installClient() {
      const { systemCode } = this.browserParams;
      let osType = getOs();
      if (osType) {
        const result = await getLatestClient({ systemCode, osType });
        if (result.code === '200') {
          window.open(result.data.soft_download_url);
        } else {
          window.alert('请求下载路径失败' + result.code);
        }
      } else {
        this.$modalMessage.error('无法检测您的操作系统，请联系管理员');
      }
    },
    /**
     * @description: 验印类型切换时
     * @param {*} e
     * @return {*}
     */
    onChangeCheckBox(value) {
      if (value.includes('30') && (value.includes('10') || value.includes('20'))) {
        this.$modalMessage.error('特殊印章不可与印鉴、公章同时选择');
        return;
      }
      this.checkboxValue = value;
      this.$emit('changeFormModel', value);
      if (this.checkboxValue.includes('30')) {
        this.subclassList = this.initSealTypeList.filter((item) =>
          this.checkboxValue.includes(item.typeno)
        )[0].children;
        this.subclass = this.initSealTypeList.filter((item) =>
          this.checkboxValue.includes(item.typeno)
        )[0].children[0].typeno;
      } else {
        this.subclassList = [];
        this.subclass = '';
      }
      this.handleChange(this.subclass);
    },
    /**
     * @description: 选择框选择变化时
     * @param {*} vl
     * @return {*}
     */
    handleChange(vl) {
      console.log('vl_this.subclass', vl, this.subclass);
      this.$emit('sealType', { checkboxValue: this.checkboxValue, subclass: vl });
    },
    /**
     * @description: 初始化重启服务
     * @return {*}
     */
    initRestartClient() {
      // 连接进程维护服务
      this.restartService = this.ws.createClientWs('restartService', 'ws://127.0.0.1:45680');
      if (!this.restartService) return;
      this.ws.onClientWsMessage('restartService', (json_data) => {
        if (json_data === 'success') {
          //清除启动定时器
          this.restartClientLock = false;
          this.connectTimer = setInterval(() => {
            console.log('246，启动');
            this.initClientWebSocket();
          }, 1000);
        }
      });
    },
    /**
     * @description: 链接服务
     * @return {*}
     */
    initClientWebSocket() {
      const { sessionId } = this;
      let clientWebSocket = this.ws.createClientWs('clientWebSocket', 'ws://127.0.0.1:45679');
      if (clientWebSocket.readyState) {
        this.clientConnectState = clientWebSocket.readyState;
      }
      if(this.clientConnectState !== 1){ // h5上传
        console.log('this.configParams',this.configParams)
        const {limitImportFiletype} = this.configParams.device
        this.uploadlimitFileType = (limitImportFiletype.split(';').map(value => value.substr(1))).join(',');
      }
      // if (!clientWebSocket) {
      //   return;
      // }
      this.ws.onClientWsOpen('clientWebSocket', (evt) => {
        if (this.connectTimer) {
          clearInterval(this.connectTimer);
        }

        const { bill_name, key, systemFlag, scanMethod } = this.browserParams;

        const { ip, port } = this.configParams.system.transferService;
        const localIp = this.configParams.system.localService.ip;
        const localPort = this.configParams.system.localService.port;
        const initObj = {
          method: 'test',
          sessionId,
          key,
          scanMethod,
          bill_name: bill_name ? bill_name : this.billData[0].bill_type_name,
          bill_num: this.billData[0].bill_num,
          systemFlag,
          uploadParam: {
            ip,
            port,
          },
          localParam: {
            ip: localIp,
            port: localPort,
          },
          localIdentifyType: [],
        };
        this.ws.sendClientWsData('clientWebSocket', initObj);
      });
      this.ws.onClientWsMessage('clientWebSocket', (json_data) => {
        // this.$emit('uploadState', false);
        if(json_data instanceof Blob){
          var reader = new FileReader();
          reader.onload = function(evt){
            if(evt.target.readyState == FileReader.DONE){
              // base64数据
              // console.log(evt.target.result)
              var url = evt.target.result;
              document.getElementById("player").src = url;
            }
          }
          reader.readAsDataURL(json_data);
        }else{
          switch (json_data.method) {
          case 'test': {
            this.clientConnectState = clientWebSocket.readyState;
            //建库
            //TODO 本地服务4.1.1.6code返回0001是bug后台会改，前端删除
            const version = json_data.version.split('.')[0];
            if (
              !(
                (version === '4' && json_data.code === '0001') ||
                (version === '6' && json_data.code === '0000')
              )
            ) {
              return;
            }
            this.deviceInfo = {
              usbID: json_data.sessionId,
              ipAdress: json_data.ip,
              macAdress: json_data.mac,
            };
            this.typeDevice = json_data.defDevType
            let scanDevice = JSON.parse(localStorage.getItem('scanDeviceName'))
            if(!this.typeDevice && scanDevice){
              this.typeDevice = scanDevice.type
            } 
            if(this.typeDevice==='1'){
                this.reqStartPreview()
            }
            break;
          }
          case 'import':
            this.collectState = 0;
            if (json_data.code === '0000') {
              //导入返回了即可继续采集
              if (json_data.fileCount == this.fileCount) {
                //fileCount为0说明取消导入，操作按钮重置
                this.isImportScan = false;
              } else {
                this.fileCount = json_data.fileCount;
              }
            } else if (json_data.code !== '0001') {
              this.$modalMessage.error(json_data.msg + json_data.code);
            }
            break;
          case 'scan':
            if (json_data.code === '0000') {
              //建库时赋值
              if (json_data.fileCount) {
                this.fileCount = json_data.fileCount;
              }
            } else {
              this.$modalMessage.error(json_data.msg + json_data.code);
              this.collectState = 0;
            }
            break;
          case 'eachFileFinish': {
            this.$emit('uploadState', false);
            const { imageData } = json_data;
            const { collectState } = this;
            if (json_data.code === '0000') {
              let imageUrl = '',
                errorMsg = '',
                imageType = imageData.fileName.split('.')[1];
              if (imageData.oldFileId) {
                imageData.fileId = imageData.oldFileId;
              }
              switch (imageType) {
                case 'bmp':
                case 'png':
                case 'txt':
                case 'tiff':
                case 'pdf':
                  imageUrl = imageType;
                  break;
                case 'jpg':
                case 'jpeg':
                  imageUrl = 'jpg';
                  break;
                case 'doc':
                case 'docx':
                  imageUrl = 'word';
                  break;
                case 'xls':
                case 'xlsx':
                  imageUrl = 'xlsx';
                  break;
                default:
                  imageUrl = 'unknown';
                  break;
              }
              if (imageData.uploadState !== '-1' && imageData.uploadState !== '0') {
                imageUrl = 'fail';
              }
              switch (imageData.uploadState) {
                case '1':
                  errorMsg = '上传失败';
                  break;
                case '2':
                  errorMsg = '文件太大';
                  break;
                case '3':
                  errorMsg = '非法文件';
                  break;
              }
              let info = {
                errorMsg,
                collectState,
                imageUrl,
                ...imageData,
              };

              if (imageData.uploadRecv) {
                imageData.uploadRecv.uploadState = imageData.uploadState;
              }
              if (imageData.uploadState == '-1') {
                //开始转圈 采集进程中
                this.collectImage(info);
              } else {
                //修改采集数据上传结果，若===0添加到目录，若不等于0则展示失败原因不再转圈
                if (imageData.uploadState !== '0') {
                  console.log('上传失败', imageData.uploadState);
                  //上传失败0成功 1失败，2文件大小超限，3禁止导入的类型
                  this.$modalMessage.error(errorMsg);
                  this.isFirstCollect = true;
                  this.isImportScan = false;
                  this.modifyCollect(info);
                } else {
                  console.log('上传成功', imageData.uploadRecv);
                  if(this.typeDevice==='1'){
                    this.collectImagesToolsList.splice(3, 1, {
                      name: '预览',
                      value: 'preview',
                      icon: 'camera',
                      iconfont: false,
                      isBreak: true,
                    });
                    this.isShowTakePhotoBtn = false
                    //上传成功之后  设备注册接口
                    this.registerDevice(imageData.uploadRecv);
                  }
                  
                  //上传成功
                  this.cameraLoading = false
                  this.uploadSuccess(imageData.uploadRecv)
                }
              }
            } else {
              this.isFirstCollect = true;
              this.isImportScan = false;
              this.$modalMessage.error(json_data.msg + json_data.code);
            }
            break;
          }
          case 'allFilesFinish': //只有扫描返回
            this.$emit('uploadState', true);
            // this.$emit('uploadState', true);
            this.collectState = 0;
            if (json_data.code === '0000') {
              this.fileCount = json_data.fileCount;
            } else {
              this.$modalMessage.error(json_data.msg);
            }
            break;
          case 'getDeviceDriver':
            this.isGetDeviceList = false;
            if (json_data.code === '0000') {
              this.allScanDevices = json_data.drivers;
            } else {
              this.$modalMessage.error(json_data.msg);
            }
            break;
          case 'setDeviceDriver':
            if (json_data.code !== '0000') {
              this.setAsScanDevice = '';
              this.$modalMessage.error(json_data.msg);
            }else{
              let device = this.allScanDevices.filter((item) => item.name == this.selectDevice)[0];
              this.typeDevice = device.type
              if(this.typeDevice==='1'){
                this.reqStopPreview()
                this.reqStartPreview()
              }
            }
            break;
          case 'uploadFinish': //导入和扫描都返回
            this.$emit('uploadState', true);
            break;
          case 'CallMatch':
            if (json_data.code !== '0000') {
              this.$modalMessage.error(json_data.msg);
            } else {
              this.getResImage(json_data.resData);
            }

            break;
          case "startPreview":
              break
          case "stopPreview":
            break
          case "takePictures":
            if(json_data.code==='0000'){
              this.cameraLoading = true
              this.reqStopPreview()
            }else {
              this.$myNotify({
                borderColor: "#FFACAC",
                title: json_data.msg,
                imageType: 1
              });
            }
            break
          default:
            console.log(json_data);
            break;
        }
        }
        
      });
    },
    /**
     * @description: 高拍仪预览
     * @return {*}
     */
    reqStartPreview(){
      const startPreview = {method:"startPreview"}
      this.ws.sendClientWsData('clientWebSocket', JSON.stringify(startPreview));
    },
    /**
     * @description: 高拍仪停止预览
     * @return {*}
     */
    reqStopPreview(){
      const stopPreview = {method:"stopPreview"}
      this.ws.sendClientWsData('clientWebSocket', JSON.stringify(stopPreview));
    },
    /**
     * @description: 拍摄按钮
     * @return {*}
     */
    camera(){
      this.reqTakePictures()
    },
    preview(){
      this.reqStartPreview()
      this.isShowTakePhotoBtn = true
      this.collectImagesToolsList.splice(3, 1, {
        name: '拍摄',
        value: 'camera',
        icon: 'camera',
        iconfont: false,
        isBreak: true,
      });
              
    },
    reqTakePictures(){
      const isNode = false
      const nodePath = ""
      const sortNum = ""
      const fileId = ""
      const formatName = ""
      const fileCount = this.fileCount.toString()
      let compress = "100%"
      console.log(this.configParams)
      if(this.configParams.device){
        compress = this.configParams.device.dcompress || this.configParams.device.compress || this.configParams.device.fileCompress
        compress = compress+'%'
      }
      const {busi_serial_no,systemCode} = this.browserParams
      getBatchId().then((data)=>{
        const batchId = data.data
         const takePictures = {
          method:"takePictures",
          params:{
            fileCount,
            systemCode,
            busi_serial_no,
            folder: nodePath,
            file_format: sortNum,
            file_format_name: formatName,
            sortNum,   //怎么传
            fileId,
            batchId,
            batch_scan_no: busi_serial_no ? "" : this.busiSerialNo,
            
          },
          acquireParams: {
            compress
          },
          custom:{
            tecrun:this.browserParams.tecrun,
          }
        }
        this.ws.sendClientWsData('clientWebSocket', takePictures);
      })

      },
      /**
     * @description: 设备注册
     * @param {*} file
     * @return {*}
     */
    registerDevice(file = null) {
      const { client_server_version, client_ip, client_mac, device_model, device_serial } = file;
      let json = {
        os_info: '',
        client_server_version,
        ip: client_ip,
        mac: client_mac,
        device_type: '0',
        device_model,
        device_serial,
        // product_name: label
      };
      this.handcalibration(file)
    },
    handcalibration(file) {
      const {
        file_id,
        upload_batch_id,
        clientFileId,
        device_id,
        device_serial,
        os_info,
        client_server_version,
        client_ip,
        client_mac,
        device_model,
      } = file;
      this.isCalibration = 1;
      const device = { deviceId: device_serial, label: device_id };
      const data = {
        file_id,
        batchId: upload_batch_id,
        clientFileId,
        calibration_type: 1,
        device,
        os_info,
        client_server_version,
        client_ip,
        client_mac,
        device_model,
      };
      this.calibration(data);
    },
    calibration(data) {
      console.log('进入调校准接口');
      const fileId = guid();
      const {
        file_id,
        batchId,
        clientFileId,
        calibration_type,
        device,
        cb,
        os_info,
        client_server_version,
        client_ip,
        client_mac,
        device_model,
      } = data;
      const { deviceId, label } = device;
      let resultMsg = '0000';
      let json = {
        // os_info,
        client_server_version,
        ip: client_ip,
        mac: client_mac,
        device_type: '0',
        device_model,
        device_serial: deviceId,
        // product_name:label,
        firstFileId: file_id, //上一个文件的id
        fileId,
        batchId: batchId,
        dpi: 300,
        calibration_type: calibration_type ? calibration_type : 1,
      };
      /*let json = {
        os_info:"",
        client_server_version:"",
        ip:"",
        mac:"",
        device_type:"0",
        device_model:"",
        device_serial:deviceId,
        // product_name:label,
        firstFileId:"20230119145740297004208440800000",//上一个文件的id
        fileId:"e19963a0028c699f4480fa6ee18598ee",
        batchId :"4ZEGm6Pt20230185c8d0c00a01000219",
        dpi:300,
        calibration_type: calibration_type?calibration_type:1
      }*/

      /**
       * @description: 提价校准数据
       * @return {*}
       */
      reqCalibration(json)
        .then((res) => {
          this.loading = false;
          //校准图像push 到vuex
          if (res.code == '200') {
            const result = res.data;
            resultMsg = res.msg;
            console.log('上传返回后校准接口返回的文件', result, typeof result);
            this.calibration_result = res.data;
            let { ip, port } = this.configParams.system.clientService;
            this.fileUrl = `http://${ip + ':' + port}/TIMS/H5/file/showFileById/${
              this.calibration_result.file_id
            }?flag=0&tecrun=${this.tecrun}`;
            console.log('this.fileUrl', this.fileUrl);
            this.calibration_params = JSON.parse(this.calibration_result.calibrationParams);
            let params = this.calibration_params.params.sort((a, b) => a.sn - b.sn);
            this.sortParams = params;

            console.log('calibration_params', this.calibration_params);
            //const file = JSON.parse(result.result)
            //console.log("上传返回后调校准接口",file, typeof file)
            // data.calibrationRes=result
            // dispatch('updateImageData', {...result,clientFileId,isFromPhoto:true})
            //调验印
          } else {
            this.$message.error(res.msg);
            res.msg ? '' : (res.msg = '返回错误');
            console.log('校准错误');
            cb && cb(res);
          }
        })
        .catch((err) => {
          this.loading = false;
          resultMsg = '返回错误';
          cb &&
            cb({
              resultState: '1000',
              resultMsg,
            });
        });
    },
    /**
     * @description: h5上传
     * @return {*}
     */
    beforeUpload(file){
      console.log('fileUpload',file)
      const maxImportFilesize =  this.configParams.maxImportFilesize
      const fileSize = file.size/1024
      if(fileSize > maxImportFilesize){
        // 文件超大
        this.$modalMessage.error('文件太大');
      }else{
        this.fileUpload(file)
      }
      return false
    },
    async fileUpload(file){
      const {
        systemFlag,
        busi_serial_no
      } = this.browserParams
      const custom ={
         operaCode: this.userId,
         tecrun: this.tecrun,
        }
      let paramsObj = {
        sid: this.sessionId,
        bill_name:'',
        key:'',
        systemFlag,
        busi_serial_no: busi_serial_no,
        bill_num: this.billData[0].bill_num,
        scanMethod: "",
        file_folder: '',
        file_format: '',
        file_id: '',
        file_name: file.name,
        upload_batch_id: this.batchId,
        folder_code: '',
        old_file_id: '',
        operaCode: this.userId,
        tecrun: this.tecrun,
      }
      //this.collectImage(paramsObj);
      const formData = new FormData();
      for (const prop in paramsObj) {
        formData.append(prop,paramsObj[prop])
      }
      formData.append('file',file);
      this.collectState = 1;
      this.deviceType = 4;
      const result = await uploadByForm(formData);
      if (result.code === '200') {
        this.uploadSuccess({isH5: true,uploadState:'0', ...result.data})
      } else {
        // 上传失败了
        this.$modalMessage.error(`上传失败了，`+ result.msg+'，请重新上传！');
      }

    },
    /**
     * @description: h5,本地服务上传成功后
     * @param {*} data obj 上传成功返回数据
     * @return {*}
     */
    uploadSuccess(data){
      //上传成功
      delete data.content;
      this.updateImageData(data);
      this.$nextTick(() => {
        this.switchCollectImgDebounce();
      });
      if (this.collectedImagesList.length > 0) {
        this.isImportScan = false;
        //每完成一次都通知父级采集完成一个
        this.$emit('change', {
          type: 'collected',
          collectedImagesList: this.collectedImagesList,
          curData: data,
          opt: { dpi: +this.dpi },
          deviceType: this.deviceType,
        });
      }
    },
    switchCollectImgDebounce: debounce(function () {
      this.switchCollectImg(this.collectedImagesList.length - 1);
    }),
    //获取重合图
    getResImage(resDataBase64) {
      const reqData = {
        taskCode: 'RES_SHOW',
        resDataBase64,
        showEpArea: 1,
      };
      // const callBack = (result) => {
      //   console.log(result);
      //   if (result.resultCode !== '0') {
      //     this.$modalMessage.error(result.resultStr);
      //   } else {
      //     //人工匹配数据，改为父级执行 展开人工匹配组件
      //     this.laborMatchResult = result;
      //   }
      // };
      this.$emit('change', { type: 'checkSeal', data: reqData });
    },
    /**
     * @description: 采集图像工具回调
     * @param {*} type 执行类型  见collectImagesToolsList的value
     * @return {*}
     */
    hangleCollectTools(type) {
      this[type] && this[type]();
    },
    /**
     * @description: 清空
     * @return {*}
     */
    delete() {
      if (this.collectedImagesList.length) {
        const { systemCode, key } = this.browserParams;
        let deleteList = [];
        for (let i = 0; i < this.collectedImagesList.length; i++) {
          var fileIds = {};
          if (this.collectedImagesList[i] && this.collectedImagesList[i].file_id) {
            fileIds = {
              fileId: this.collectedImagesList[i].file_id,
              systemCode,
              key,
            };
            deleteList.push(fileIds);
          }
        }
        reqDeleteImages({ tecrun: this.tecrun, fileIds: deleteList });
        this.collectedImagesList = [];
        this.isFirstCollect = true;
        this.chooseCanvas && this.chooseCanvas.clear();
        // this.$modalMessage.success('清除完成');
      }
      this.$emit('change', { type: 'clear' });
    },
    //验印类型初始化
    initSealType() {
      let selectSeal = [];
      console.log(this.initSealTypeList);
      this.initSealTypeList.map((item) => {
        if (item.disable) {
          selectSeal.push(item.typeno);
        }
      });
      if (!selectSeal.length) {
        selectSeal = [this.initSealTypeList[0]?.typeno];
      }
      this.onChangeCheckBox(selectSeal);
    },
    /**
     * @description: 设置设备
     * @return {*}
     */
    device() {
      if (this.clientConnectState !== 1 || this.isGetDeviceList) {
        return;
      }
      let getDevice = { method: 'getDeviceDriver' };
      this.ws.sendClientWsData('clientWebSocket', getDevice);
      this.isGetDeviceList = true;
      this.setDeviceVisible = true;
    },
    /**
     * @description: 设置 单面双面 dpi
     * @return {*}
     */
    setting() {
      this.setOptVisible = true;
    },
    /**
     * @description: 扫描
     * @return {*}
     */
    scan: debounce(function () {
      // 只可以扫描一张 只有验印时候限制（不限制可以注释掉）
      if (this.$config.scanOnlyFirst) {
        //如果项目配置支持验印只支持扫描一次
        if (!this.isFirstCollect && this.isSingle == 1 && this.scanOnly && this.selectSealType) {
          return;
        }
      }
      this.isImportScan = true;
      if (this.clientConnectState !== 1) {
        this.$modalMessage.warning('服务未准备好，稍后再试');
        return;
      }
      getBatchId().then(
        (data) => {
          console.log(this.collectState);
          if (this.collectState) {
            this.$modalMessage.error('扫描服务正在响应中，请稍后');
            return;
          }
          if (this.isGetDeviceList) {
            this.$modalMessage.error('正在获取扫描设备，请稍后');
            return;
          }

          let { busi_serial_no = '', systemCode = '' } = this.browserParams;
          let compress = '100%',
            dpi = '300';
          console.log(this.configParams);
          if (this.configParams.device && this.configParams.device.isCompress === '1') {
            compress = this.configParams.device.fileCompress;
          }
          if (this.scanOnly) {
            if (this.configParams.device) {
              dpi = this.configParams.device.dpi;
            }
          }
          if (this.imageBatchId) {
            busi_serial_no = this.imageBatchId;
          }
          let { tecrun } = getUrlParam(location.search);
          let custom = { tecrun: this.tecrun ? this.tecrun : tecrun, operaCode: this.userId };
          const scanInfo = {
            method: 'scan',
            params: {
              fileCount: String(this.fileCount),
              systemCode,
              busi_serial_no: busi_serial_no ? busi_serial_no : '',
              folder: '',
              file_format: '',
              file_format_name: '',
              sortNum: '', //怎么传
              fileId: '',
              batchId: data.data,
              batch_scan_no: busi_serial_no ? '' : this.busiSerialNo,
            },
            acquireParams: {
              DPI: dpi,
              duplex: this.singleOrDoubleFace,
            },
            custom,
          };
          if (compress) {
            scanInfo.acquireParams.compress = compress;
          }

          this.ws.sendClientWsData('clientWebSocket', scanInfo);
          this.collectState = 2;
          this.isFirstCollect = false;
          this.deviceType = 1; //TODO 默认 设置设备类型是平板 也可能是滚筒知道如何判断后赋值位置进行调整
        },
        () => {
          this.isFirstCollect = true;
          this.isImportScan = false;
        }
      );
    }),
    /**
     * @description: 导入
     * @return {*}
     */
    import() {
      this.isImportScan = true;
      getBatchId().then((data) => {
        if (this.clientConnectState !== 1) {
          // 走h5上传
          this.batchId = data.data
          document.querySelector('.upload-input input').click()
        }else{
          if (this.collectState) {
            this.$modalMessage.error('扫描服务正在响应中，请稍后');
            return;
          }
          let { busi_serial_no, systemCode } = this.browserParams;
          const { fileTypeLimit, maxFileSize } = this.configParams;
          let custom = { tecrun: this.tecrun, operaCode: this.userId };
          if (this.imageBatchId) {
            busi_serial_no = this.imageBatchId;
          }
          const importInfo = {
            method: 'import',
            limit: {
              fileType: fileTypeLimit,
              fileSize: maxFileSize,
            },
            params: {
              fileCount: String(this.fileCount),
              systemCode,
              busi_serial_no: busi_serial_no ? busi_serial_no : '',
              folder: '',
              file_format: '',
              file_format_name: '',
              sortNum: '',
              fileId: '',
              batchId: data.data,
              batch_scan_no: busi_serial_no ? '' : this.busiSerialNo,
            },
            custom,
          };
          console.log(importInfo, busi_serial_no, this.busiSerialNo);
          this.ws.sendClientWsData('clientWebSocket', importInfo);
          this.collectState = 1;
          this.deviceType = 4;
        }
      });
    },
    complete() {
      this.$emit('change', { type: 'complete' });
    },
    /**
     * @description: 提交
     * @return {*}
     */
    submit() {
      if (this.isImportScan) return;
      this.$emit('change', { type: 'submit' });
    },
    /**
     * @description: 采集图像数据
     * @return {*}
     */
    collectImage(imageData) {
      console.log('采集图像，正在采集中的图像');
      let index = this.unCollected.indexOf(imageData.fileId);
      //
      if (index === -1) {
        this.collectImages.push(imageData);
      } else {
        this.unCollected.splice(index, 1);
      }
    },
    /**
     * @description: 修改采集数据上传结果
     * @param {*} imageData  采集图像数据
     * @return {*}
     */
    modifyCollect(imageData) {
      console.log('采集失败修改状态');
      const index = this.collectImages.findIndex((item) => item.fileId === imageData.fileId);
      if (index === -1) {
        this.collectImages.push(imageData);
      } else {
        this.collectImages.splice(index, 1, imageData);
      }
    },
    /**
     * @description: 更新采集数据上传结果
     * @param {*} imageDataUploadRecv 采集图像上传完成返回数据
     * @return {*}
     */
    updateImageData(imageDataUploadRecv) {
      console.log('采集成功更新数据');
      let imageData = imageDataUploadRecv;
      const index = this.collectImages.findIndex((item) => item.fileId === imageData.file_id);
      const { scanMethod } = this.browserParams;
      if (scanMethod === '00-2') {
        const fileFolder = imageData.file_folder.substring(1);
        const folders = fileFolder.split('/');
        if (folders[1] === '影像补扫') {
          imageData.isReScan = true;
        }
      }
      if (index === -1 && !imageDataUploadRecv.isH5) {
        this.unCollected.push(imageData.file_id);
      } else {
        if (imageData.resultCode === '0000') {
          this.collectImages.splice(index, 1);
        } else {
          this.collectImages[index].imageUrl = 'fail';
          this.collectImages[index].uploadthis = '3';
          this.collectImages[index].errorMsg = imageData.resultMsg;
        }
      }
      if (imageData.resultCode === '0000') {
        if (!imageData.thumbUrl) {
          imageData.thumbUrl = `${this.baseUrl}/html5/rest/file/get/${imageData.file_id}?flag=1`;
        }
        if (!imageData.imageUrl) {
          imageData.imageUrl = imageData.url
            ? imageData.url
            : `${this.baseUrl}/html5/rest/file/get/${imageData.file_id}?flag=0`;
        }
        if (imageData.old_file_id) {
          this.collectedImagesList.map((item, index) => {
            if (item.file_id === imageData.old_file_id) {
              this.collectedImagesList.splice(index, 1, imageData);
            }
          });
        } else {
          //展示采集图像列表的数据
          this.collectedImagesList = [...this.collectedImagesList, imageData];
        }
      }
    },
    /**
     * @description: 切换查看采集图像
     * @param {*} index
     * @return {*}
     */
    switchCollectImg(index) {
      this.currentImageIndex = index;
      // 画canvas图像
      this.mainFabric();
      this.$emit('change', {
        type: 'curImage',
        index: index,
        collectedImagesList: this.collectedImagesList,
        curData: this.collectedImagesList[index],
        opt: { dpi: +this.dpi },
      });
    },
    /**
     * @description: 确定使用选择的设备
     * @return {*}
     */
    confirmDevice() {
      let device = this.allScanDevices.filter((item) => item.name == this.selectDevice)[0];
      const deviceInfo = {
        method: 'setDeviceDriver',
        driverId: device.id,
        driverName: device.name,
        type: device.type,
      };

      this.setDeviceVisible = false;
      this.ws.sendClientWsData('clientWebSocket', deviceInfo);
    },
    /**
     * @description: 确认当前设置
     * @return {*}
     */
    confirmSetting() {
      this.singleOrDoubleFace = this.opt.singleOrDoubleFace;
      this.dpi = this.opt.dpi;
      this.setOptVisible = false;
    },
    checkSeal() {
      const imageList = this.collectedImagesList.map((item, index) => {
        return {
          imageIndex: index,
          imageBase64: item.imageUrl,
          // pageMode: index % 2,
          pageMode: 0,
        };
      });
      const reqData = {
        taskCode: 'AUTO_BUILD',
        imageList,
        dpi: this.dpi,
        showEpArea: 0,
        stampGroup: 0,
      };
      this.$emit('change', { type: 'checkSeal', data: reqData });
    },
    /**
     * @description: 通知父级组件初始化完成
     * @return {*}
     */
    emitInited() {
      this.$emit('change', {
        type: 'inited',
        collectedImagesList: this.collectedImagesList,
        opt: { dpi: this.dpi },
      });
    },
    /**
     * @description: 删除项
     * @param {*} index  删除索引
     * @return {*}
     */
    deleteImage(index) {
      if (typeof index == 'undefined') {
        //如果没传入index就默认为列表最后一位
        index = this.collectedImagesList.length - 1;
      }
      index = String(index);
      const { systemCode, key } = this.browserParams;
      const fileId = this.collectedImagesList[this.currentImageIndex].file_id;
      var fileIds = [];
      if (this.collectedImagesList[index] && this.collectedImagesList[index].file_id) {
        fileIds = [
          {
            fileId: this.collectedImagesList[index].file_id,
            systemCode,
            key,
          },
        ];
      }
      reqDeleteImages({ tecrun: this.tecrun, fileIds: fileIds }).then((data) => {
        this.collectedImagesList.splice(index, 1);
        this.$emit('change', {
          type: 'delete',
          delIndex: index,
          collectedImagesList: this.collectedImagesList,
          opt: { dpi: +this.dpi },
        });
        console.log(1075, '删除的', index, this.currentImageIndex);
        if (index == this.currentImageIndex) {
          this.switchCollectImg(0);
        } else {
          let index = this.collectedImagesList.findIndex((item) => item.file_id === fileId);
          this.switchCollectImg(index);
        }
      });
    },
    /**
     * @description: 在图像上反显当前印鉴
     * @param {*} currentImageIndex   当前印鉴卡序号
     * @param {*} item
     * @return {*}
     */
    viewCurSeal(currentImageIndex, item) {
      const index = currentImageIndex;
      this.chooseCanvas.clearItems();

      if (this.currentImageIndex != index) {
        this.chooseCanvas.clear();
        this.switchCollectImg(index);
        //不知为何使用chooseDraw
        // this.chooseDraw(this.collectedImagesList[index].imageUrl, this.chooseCanvas, true, item);
        setTimeout(() => {
          this.chooseCanvas.viewArea(item);
        }, 800);
      } else {
        // let items = this.chooseCanvas.getObjects();
        // for (let i = 0; i < items.length; i++) {
        //   if (i !== 0) {
        //     this.chooseCanvas.remove(items[i]);
        //   }
        // }
        // this.borderRect(item);

        //画矩形区域
        this.chooseCanvas.viewArea(item);
      }
    },
  },
  watch: {
    initSealTypeList: {
      handler(value) {
        if (value) {
          this.initSealType();
        }
      },
    },
    subclass() {
      this.$emit('sealType', { checkboxValue: this.checkboxValue, subclass: this.subclass });
    },
    list: {
      deep: true,
      handler(value) {
        this.collectedImagesList = value;
        if (this.collectedImagesList.length) {
          this.$nextTick(() => {
            this.switchCollectImg(0);
          });
        }
      },
    },
    choiceHold(value) {
      this.$store.dispatch('business/choice-seal', value);
    },
    collectImagesToolsOpt: {
      deep: true,
      handler(value) {
        this.collectImagesToolsList = value;
        this.toolKey++;
      },
    },
    isImportScan(value) {
      //监控是否正在导入或扫描
      this.collectImagesToolsList.map((item) => {
        if (item.value == 'submit' || item.value == 'complete' || item.value == 'scan') {
          if (value) {
            this.$set(item, 'disabled', true);
          } else {
            this.$set(item, 'disabled', false);
          }
        }
      });
    },
    isGetDeviceList(value) {
      //监控是否正在获取设备列表
      this.collectImagesToolsList.map((item) => {
        if (item.isGetDevice) {
          if (value) {
            this.$set(item, 'disabled', true);
          } else {
            this.$set(item, 'disabled', false);
          }
        }
      });
    },
    isFirstCollect(value) {
      if (!this.$config.scanOnlyFirst) return;
      //监控是否为第一次采集
      this.collectImagesToolsList.map((item) => {
        if (item.value == 'scan') {
          if (!value && (this.isSingle == 1) & this.scanOnly & this.selectSealType) {
            //如果不是首次扫描，并且该项为扫描功能则禁用
            this.$set(item, 'disabled', true);
          }
        }
      });
    },
    isCamera(){
      //监控是否允许拍摄和扫描
      this.collectImagesToolsList.map((item)=>{
        if(item.value == 'camera'){{
          if(this.typeDevice==='0'){
            this.$set(item,'disabled',true)
          }
        }
        }
      })
    },
    pendingCount(value) {
      this.collectImagesToolsList.map((item) => {
        if (item.value == 'delete') {
          if (value != 0) {
            this.$set(item, 'disabled', true);
          } else {
            this.$set(item, 'disabled', false);
          }
        }
      });
    },
  },
  beforeDestroy() {
    console.log('销毁collectimages，关闭ws连接');
    this.ws.closeClientWs('clientWebSocket');
    this.restartService && this.ws.closeClientWs('restartService');
    //清空选择第几套的数据
    this.$store.dispatch('business/choice-seal', '');
  },
};
</script>
<style lang="stylus" type="text/stylus" rel="stylesheet/stylus" scoped>
.player-box
  background-color: #fff
  height 100%
  position absolute
  top 36px
  right 80px
  width calc(100% - 80px)
  .photo-img
    height 100%
.ws-off-line
  position: absolute
  right: 80px;
  top: 0px;
  .ant-btn
    padding 0 4px
.select-sets
  position absolute
  right 20px
  top: 0px
.aside-tools
  height 100%
  position absolute
  right 14px
  top 10px
  z-index 9
.upload-input
  display inline-block
  width 0
  height 0
.empty-icon
  display flex
  justify-content center
  flex-direction column
  >>>.ant-empty-image
    margin-bottom 16px
.collected-image
  max-width: 100%;
  max-height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
.collected-image-list
  ul
    margin-left 8px
    height: 100%;
    overflow-y auto
    overflow-x hidden
    li
      width 88px
      height 62px
      margin-bottom: 12px
      cursor pointer
      border 1px solid transparent
      position relative
      .delete{
        position absolute
        top 2px
        right 2px
        cursor pointer
      }
      &:hover,&.on{
        border 1px solid #1890FF
      }
.bg-transparent
  background transparent
.scan-type
  display inline-block
  padding-right 24px
  font-family PingFang-SC-Medium
  font-size 14px
  color #414363
  letter-spacing 0.78px
  font-weight 500
  /deep/.ant-radio-group
    font-family PingFang-SC-Regular
    font-size 14px
    color #606066
    /deep/.ant-radio-inner
      border: 1px solid rgba(197,206,224,1)
.back-upper
  font-family PingFang-SC-Regular
  font-size 13px
  color #1890FF
  >span
    cursor pointer
  .back-title
    display inline-block
    margin-left 7px
.ant-layout-footer, .ant-layout-content, .ant-layout-header, .ant-layout-sider
  background transparent !important
.main-box
  flex 1
  overflow hidden
  display flex
  justify-content center
  align-items center
  position relative
  margin-right 60px
  &.read-only
    margin-right 0
</style>
